

const loop = function(){};
const inBrowser = typeof window !== 'undefined' ;
const inSupportTouch = inBrowser ? !!("ontouchend" in document) : false;
const events = {
    "start":inSupportTouch?"touchstart":"mousedown",
    "move" :inSupportTouch?"touchmove":"mousemove",
    "end"  :inSupportTouch?"touchend":"mouseup"
};
const {innerWidth:STAGE_WIDTH,innerHeight:STAGE_HEIGHT} = inBrowser ? window : {innerWidth:640,innerHeight:1136};

const EventClass = require("yindu-event");
class Wipe extends EventClass {
    constructor({canvas=null,ratio =.5,radius=10,width=STAGE_WIDTH,height=STAGE_HEIGHT,cb=loop} = {}){
        super();
        if(!inBrowser) {
            return console.error("this must be in brower");
        }
        this.$canvas = canvas || document.createElement("canvas") ;
        this.$context = this.$canvas.getContext("2d");
        this.$width = width;
        this.$height = height;
        this.$canvas.width = this.$width;
        this.$canvas.height = this.$height;
        this.$ratio = 100 * ratio;  
        this.$radius = radius;
        this.$cb = cb;
        this.$onTouchStart = this.$onTouchStart.bind(this);
        this.$onTouchMove = this.$onTouchMove.bind(this);
        this.$onTouchEnd = this.$onTouchEnd.bind(this);
        this.$canvas.addEventListener(events['start'],this.$onTouchStart,!1);
        this.$prevPos = null;
    }
    get el(){
        return this.$canvas;
    }
    addImage(img){
        
        if(!img) {
            return console.error("");
        }
        this.$canvas.removeEventListener(events['start'],this.$onTouchStart,!1);
        this.$canvas.removeEventListener(events['move'],this.$onTouchMove,!1);
        this.$canvas.removeEventListener(events['end'],this.$onTouchEnd,!1);

        let src = "";
        if(img instanceof HTMLImageElement){
            src = img.src;
        }else {
            src = img;
        }
        let _img = new Image,self = this;
        _img.crossOrigin = "anonymous";
        _img.onload = function(){
            self.$context.drawImage(this,0,0,self.$width,self.$height);
            self.$canvas.addEventListener(events['start'],self.$onTouchStart,!1);
            self.trigger("wipe:res-complete");
        }
        
        _img.src = src;
        
        
    }
    $onTouchStart(ev){
        ev.preventDefault();
        ev.stopPropagation();
        this.trigger("wipe:touchstart");
        this.$prevPos = null;
        this.$canvas.addEventListener(events['move'],this.$onTouchMove,!1);
        this.$canvas.addEventListener(events['end'],this.$onTouchEnd,!1);
        this.$ondraw(ev);
        return false;
    }
    $onTouchMove(ev){
        ev.preventDefault();
        ev.stopPropagation();
        this.trigger("wipe:touchmove");
        this.$ondraw(ev);   
        return false;     
    }
    $onTouchEnd(ev){
        ev.preventDefault();
        ev.stopPropagation();
        this.trigger("wipe:touchend");
        this.$canvas.removeEventListener(events['move'],this.$onTouchMove,!1);
        this.$canvas.removeEventListener(events['end'],this.$onTouchEnd,!1);
        return false; 
    }
    $ondraw(ev){
        let {pageX,pageY} = inSupportTouch ? ev.touches[0] : ev,{$context:c,$prevPos,$radius} = this;
        c.save();
        c.globalCompositeOperation = "destination-out";
        c.beginPath();
		c.arc(pageX,pageY,$radius,0,2*Math.PI,true);
		c.fill();
        c.closePath();
        if($prevPos){
            c.lineWidth = 2 * $radius;
            c.beginPath();
            c.moveTo($prevPos.pageX,$prevPos.pageY);
            c.lineTo(pageX,pageY);
            c.closePath();
            c.stroke();
        }
        this.$prevPos = {pageX,pageY}
        c.restore();
        this.$checkRatio();
        
    }
    $checkRatio(){
        let  {$width,$height,$context,$ratio,$canvas,$cb} = this,
        {data:imageData} = $context.getImageData(0,0,$width,$height),
        $canvasImageData = $width * $height;
		for(var i = 0,len = imageData.length,num = 0; i<len;i+=4){
            !imageData[i+3] && num++;
        }
        var percent = ~~(num*100 / $canvasImageData);
		if(percent >= $ratio){
            this.trigger("wipe:complete");
            $context.clearRect(0,0,$width,$height);
            this.$remove();
            $cb();
		}
    }
    $remove(){
        let {$canvas} = this;
        $canvas.removeEventListener(events['start'],this.$onTouchStart,!1);
        $canvas.removeEventListener(events['move'],this.$onTouchMove,!1);
        $canvas.removeEventListener(events['end'],this.$onTouchEnd,!1);
        let parent = $canvas.parentNode;
        parent && parent.removeChild($canvas);
    }




}

module.exports = Wipe;